<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>白天不懂夜的黑</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="lib/mapbox-gl.css" rel="stylesheet" />
  <style>
    #app,
    #map,
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-size: 16px;
    }
    .canvas-text {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      color: #ff6308;
    }
  </style>
</head>

<body>
<div id="app">
  <div id="map">
  </div>
</div>
<script src="lib/mapbox-gl.js"></script>
<script src="lib/vectorLayer.js"></script>
<script>
  var layer;
  var mapStyle = {
    "version": 8,
    "name": "Dark",
    "sources": {
      "XYZTile": {
        "type": "raster",
        "tiles": [
          "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          "https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          "https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
        ],
        "tileSize": 256
      }
    },
    "layers": [{
      "id": "XYZTile",
      "type": "raster",
      "source": "XYZTile",
      "minzoom": 0,
      "maxzoom": 22
    }
    ]
  };

  var map = new mapboxgl.Map({
    container: 'map',
    maxZoom: 18,
    minZoom: 0,
    zoom: 5.51,
    center: [111.024435, 40.2289],
    style: mapStyle,
    attributionControl: false
  });
  map.on('load', function() {
    // const layerData = {
    //   "offset":0,
    //   "coordinates":[[-160.25,66.75],[179.75,66.75],[179.75,-50.75],[-160.25,-50.75]],
    //   "scale": 1,
    //   'type': 18,
    //   'url': 'data/img.png'
    // }
    // addRasterLayer(layerData, window.map)
    fetch('data/data2.json').then(res => res.json()).then(res => {
      layer = new VectorLayer(res, map)
    })
  });
</script>
</body>

</html>
